<template>
    <view class="content">
        <!-- 头部背景 -->
        <view class="header-bg u-text-center u-p-t-100">
            <text class="u-font-32 uni-inverse-color">个人中心</text>
        </view>
        <view class="uni-area">
            <!-- 用户信息 -->
            <view class="uni-shadow u-flex u-col-top card">
                <u-avatar size="60" class="u-m-r-40" :src="userInfo.profile?userInfo.profile:'/static/logo.png'"></u-avatar>
                <view style="width:74%">
                    <view class="u-flex u-row-between">
                        <text class="u-font-36 font-bold">{{userInfo.userName}}</text>
                        <u-icon name="edit-pen" color="#ccc" size="30" @click="skip('/pages/my-bag/userInfo')"></u-icon>
                    </view>
                    <view class="u-font-28 uni-dec-color u-m-t-30">
                        <text class="u-m-r-16" v-if="userInfo.sex==0">男</text>
                        <text class="u-m-r-16" v-else-if="userInfo.sex==1">女</text>
                        <text class="u-m-r-16" v-else >未知</text>
                        <text>{{userInfo.phone}}</text>
                    </view>
                    <view class="u-font-28 uni-dec-color u-m-t-14">{{userInfo.deptName}}</view>
                </view>
            </view>
            <!-- 操作 -->
            <u-button v-for="(item,index) in operations" :key="index"
                class="item u-m-t-30 u-p-38" text="" @tap="skips(item)">
                <view style="width:100%" class="u-flex u-row-between">
                    <view class="u-flex">
                        <u-icon :name="item.icon" color="#ccc" size="16"></u-icon>
                        <text class="u-m-l-28">{{item.title}}</text>
                    </view>
                    <u-icon name="/static/icons/right.png" color="#ccc" size="16"></u-icon>
                </view>
            </u-button>
            <!-- 退出登陆 -->
            <u-button class="u-m-t-66 quit" text="退出登陆" @tap="quitModal=true"></u-button>
            <u-modal :show="quitModal" title="提示" content='确认退出吗?' width="600rpx"
                :closeOnClickOverlay="true" @close="quitModal=false" 
                :showCancelButton="true" confirmColor="red" 
                @cancel="quitModal=false" @confirm="quit">
            </u-modal>
        </view>

        <!-- tabbar 盒子阴影 -->
        <view class="tabbar-shadow"></view>
        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
// #ifdef APP-PLUS
import APPUpdate from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
// #endif
export default {
    data(){
        return{
            userInfo: uni.getStorageSync("userInfo"), // 用户信息
            operations:[
                { icon:'/static/my/my1.png', title:'联系我们', url:'/pages/my-bag/contact' },
                { icon:'/static/my/my2.png', title:'关于我们', url:'/pages/my-bag/about' },
                { icon:'/static/my/my3.png', title:'软件更新' },
                // { icon:'/static/my/my4.png', title:'分享' },
                { icon:'/static/my/my5.png', title:'修改密码', url:'/pages/my-bag/edit-password' },
            ],
            quitModal: false,
        }
    },

    onLoad(){
        this.getUserInfo()
    },

    methods: {
        // 获取用户信息
        getUserInfo(){
            uni.showLoading({ title:'用户信息获取中' })
            this.$request(this,this.$apis.userInfo,{}).then(res=>{
                // console.log('用户信息',res)
                this.userInfo = res
                uni.setStorageSync("userInfo",res)
            }).then()
        },

        // 跳转
        skip(url){
            uni.navigateTo({ url:url })
        },
        skips(item){
            if( item.title == '软件更新' ){
                // #ifdef APP-PLUS 
                // 检测更新
                uni.showLoading({ title:'检测中'})
                APPUpdate(true);
                // #endif
            }else{
                uni.navigateTo({ url:item.url })
            }
        },

        // 退出登陆
        quit(){
            this.quitModal = false
            uni.showLoading({ title:'退出中' })
            // uni.clearStorageSync()
            setTimeout(() => {
                uni.hideLoading()
                uni.reLaunch({
                    url: '/pages/login/login'
                })
            }, 1500)
        }
    },
}
</script>

<style scoped lang="scss">
    .content{
        .header-bg{
            height: 360rpx;
            background: linear-gradient(296deg, #4ACEFF 0%, #21B4F3 100%);          
            box-shadow: 0px 3px 5px rgba(230, 230, 230, 0.6);
        }
        .card{
            border-radius: 16rpx;
            background: $uni-text-color-inverse;
            margin-top: -152rpx;
        }
        .item{ 
            height: 100rpx;
            border: none;
            border-radius: 16rpx;
            box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.05);
        }
        .quit{
            width: 600rpx; 
            height: 86rpx;
            background: #EEEEEE;
            color: #ADB4BD;
            border: none;
        }

        // tabbar阴影
        .tabbar-shadow{
            width: 100%;
            position: fixed;
            left: 0;
            z-index: 997; 
            box-shadow: 0px -5px 10px -10px rgba(0, 0, 0, 0.5);
            height: 44px;
            /* #ifdef APP-PLUS */
            bottom: -44px;
            /* #endif */
            /* #ifdef H5 */
            bottom: 11px;
            /* #endif */
        }
    }

</style>